import React, {  useState } from "react";
import { Button, Form, Input, Tree } from "antd";
import { CategoryType } from "@/types/course";
import type { DataNode, TreeProps } from 'antd/es/tree';
import { mainRoutes } from "@/router";
import { rolePost } from "@/api/user";
import { RoleType } from "@/types/user";

type IProps = {
  
};

const RoleForm: React.FC<IProps> = (props) => {
  const [form] = Form.useForm(); //获取表单对象
  const onFinish = async(value:RoleType)=>{
    console.log(value);
    rolePost(value)
  }
  const onCheck: TreeProps['onCheck'] = (checkedKeys) => {
    console.log('onCheck', checkedKeys);
    form.setFieldsValue({permission:checkedKeys}) //手动为表单赋值
  };
  return (
    <Form
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 18 }}
      layout="horizontal"
      style={{ maxWidth: 600 }}
      onFinish={onFinish}
      form={form}
    >
      <Form.Item label="角色名称" name="name" rules={[{ required: true, message: '请输入类目名称' }]}>
        <Input />
      </Form.Item>
      
      <Form.Item label="角色权限" valuePropName="checked" name="permission" rules={[{ required: true, message: '请选择上架状态' }]}>
        <Tree
          checkable
          onCheck={onCheck}
          treeData={mainRoutes}
        />
      </Form.Item>
      <Form.Item label=" ">
        <Button type="primary" htmlType="submit">确认</Button>
      </Form.Item>
    </Form>
  );
};

export default RoleForm;
